<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="/admin/lib/html5shiv.js"></script>
    <script type="text/javascript" src="/admin/lib/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="/admin/static/h-ui/css/H-ui.css"/>
    <link rel="stylesheet" type="text/css" href="/admin/static/h-ui.admin/css/H-ui.admin.css"/>
    <link rel="stylesheet" type="text/css" href="/admin/lib/Hui-iconfont/1.0.8/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="/admin/static/h-ui.admin/skin/default/skin.css" id="skin"/>
    <link rel="stylesheet" type="text/css" href="/admin/static/h-ui.admin/css/style.css"/>
    <!--[if IE 6]>
    <script type="text/javascript" src="/admin/lib/DD_belatedPNG_0.0.8a-min.js"></script>
    <script>DD_belatedPNG.fix('*');</script>
    <![endif]-->
    <title></title>
    <style>
        #datatable_paginate{
            margin-top:10px ;
        }
        #datatable_info{
            padding: 20px;
        }
    </style>
</head>
<body>
<nav class="breadcrumb">
    <nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 检测业务 <span
            class="c-gray en">&gt;</span> <a href="javascript:;"
                                             onclick="location.href='/{{config('constant.name_admin')}}/contract/indexAll';">批次查看</a>
        <span class="c-gray en"> &gt;</span>编辑<span class="c-gray en"> &gt;</span> 备注模板
        <a class="btn btn-primary radius r" style="line-height:1.6em;margin-top:3px"
           href="javascript:window.location.reload();" title="刷新">
            <i class="Hui-iconfont">&#xe68f;</i>
        </a>
        <a class="btn btn-primary radius r mr-10" style="line-height:1.6em;margin-top:3px" href="/{{config('constant.name_admin')}}/contractGaiyao/index?id={{$contract_id}}">
            <i class="Hui-iconfont Hui-iconfont-arrow1-left"></i>&nbsp;&nbsp;返回
        </a>
    </nav>

</nav>
<div class="page-container">
    <div class="panel panel-primary">
        <div class="panel-header">模板添加</div>
        <div class="panel-body">
            <form class="form form-horizontal" id="form" autocomplete="off">
                {{csrf_form_field()}}
                <div class="row cl">
                    <label class="form-label col-sm-1">模板内容：</label>
                    <div class="formControls col-sm-7">
                        <input class="input-text required" type="text" name="content" >
                        <span style="font-size:10px;">模板示例：此工器具实际为kV,试验是按{vol}检测。（其中{vol}为指定额定电压，不可更改）</span>
                    </div>
                </div>
                <div class="row cl ">
                    <div class="text-c">
                        <input class="btn btn-primary radius mb-3" id="sub" type="button" value="&nbsp;&nbsp;添加&nbsp;&nbsp;">
                    </div>
                </div>
                @csrf
            </form>
        </div>
    </div>
    <div class="panel panel-primary mt-15">
        <div class="panel-header">已添加模板</div>
        <div class="panel-body">
            <table id="datatable" class="table table-border table-bordered table-hover table-bg table-responsive table-condensed">
                <thead>
                <tr class="text-c">
                    <th>模板内容</th>
                    <th>操作</th>
                </tr>
                </thead>
            </table>

        </div>
    </div>
</div>
<script type="text/javascript" src="/admin/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="/admin/lib/layer/3.1.1/layer.js"></script>
<script type="text/javascript" src="/admin/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="/admin/lib/jquery.validation/1.14.0/messages_zh.js"></script>
<script type="text/javascript" src="/admin/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script>
    var table = null;
    $(function () {
        $.fn.dataTable.ext.errMode = 'throw';//datatable抛异常的方式，在console中输出，默认以alert的方式弹出
        table = $('#datatable').DataTable({
            serverSide: false,
            ajax: '{{URL::full()}}',
            processing: true,//加载数据时候是否显示进度条
            language: {url: '/admin/lib/datatables/dataTables_Chinese_Lang.json'},
            columns: [
                {data: "content", class: "text-c"},
                {
                    data: null, class: "text-c", render: function (data, type, row) {
                        let str = '<a title="删除" href="javascript:;" onclick="del('+row.id+')" ><i class="Hui-iconfont">&#xe6e2;</i></a>';
                        return str;
                    }
                }//操作
            ],
        });
    })

    $("#sub").on('click',function () {
        let valid = $("#form").valid();
        if(valid){
            $.ajax({
                type: 'post',
                url: 'add',
                data: $('#form').serializeArray(),
                success: function(msg) {
                    layer.msg(msg);
                    table.ajax.reload();
                    window.location.reload()
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    if(XMLHttpRequest.status === 422){
                        let errors = JSON.parse(XMLHttpRequest.responseText).errors;
                        let error = '';
                        $.each(errors,function(i,val) { //两个参数，第一个参数表示遍历的数组的下标，第二个参数表示下标对应的值
                            if(error === ''){
                                error = val;
                            }
                            return false;
                        })
                        layer.msg(error[0]);
                    }else{
                        layer.msg('网络错误');
                    }
                    window.location.reload()
                }
            });
        }
    })
    function del(id) {
        layer.confirm('确定删除当前模板吗？',function (res) {
            $.ajax({
                type: 'post',
                url: 'del',
                data: {id:id,_token:'{{csrf_token()}}',_form_token:"{{csrf_form_token()}}"},
                success: function(res) {
                    if(res == 0){
                        layer.msg('删除失败');
                    }else{
                        layer.msg('删除成功');
                        table.ajax.reload();
                    }
                    window.location.reload()
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    layer.msg('网络错误');
                    window.location.reload()
                }
            });
        })

    }
</script>
</body>
</html>

